<template>
	<view>
		<div class="footer_row">
			<div class="left_row" @click="toHome">
				<view v-if="active=='home'" class="iconfont icon-home-selected"></view>
				<view v-else class="iconfont icon-home-default"></view>
				<p>首页</p>
			</div>
			<div class="right_row" @click="toMine">
				<view v-if="active=='me'" class="iconfont icon-mine-selected"></view>
				<view v-else class="iconfont icon-mine-default"></view>
				<p>我的</p>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		name:"footer",
		props: ['active'],
		data() {
			return {
				
			};
		},
		methods: {
			// 去往我的页面
			toMine() {
				if(this.active !== 'me') {
					if(this.active == 'home') {
						uni.switchTab({
							url: '/pages/user/user',
							fail(res) {
								console.log(res)
							}
						})
					} else {
						uni.switchTab({
							url: '/pages/user/user',
							fail(res) {
								console.log(res)
							}
						})	
					}

				}
				
			},
			//底部tab切换
            toHome(){
				if(this.active !== 'home') {
					let pages = getCurrentPages()
					let delta = -1
					for(let i=0; i<pages.length; i++) {
						if(pages[i].$page.fullPath == '/pages/material/index') {
							delta = (pages.length-(i+1))
							break
						}
					}
					// console.log(pages)
					console.log(delta, '后退层级')
					if(delta == -1) {
						uni.redirectTo({
							url: '/pages/material/index'
						})
					} else {
						uni.navigateBack({
							delta: delta
						})
					}
					
				}
            },
		}
	}
</script>

<style scoped lang="scss">
.footer_row {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		background: #ffffff;
		border-top: 1px solid #EFEFEF;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 2;

		.left_row {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-flow: column;
			flex-wrap: wrap;

			img {
				width: 40rpx;
				height: 40rpx;
			}

			p {
				font-size: 22rpx;
			}
		}

		.right_row {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-flow: column;
			flex-wrap: wrap;

			img {
				width: 40rpx;
				height: 40rpx;
			}

			p {
				font-size: 22rpx;
			}
		}
	}
</style>
